<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
    xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity6">
<head>
    <meta charset="UTF-8">
    <title>woodwhales-music</title>
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
    <link rel="stylesheet" th:href="@{/webjars/element-ui/lib/theme-chalk/index.css}">
    <script th:src="@{/webjars/vue/dist/vue.js}"></script>
    <script th:src="@{/webjars/element-ui/lib/index.js}"></script>
    <script type="text/javascript" th:src="@{/webjars/axios/dist/axios.js}"></script>
    <link rel="stylesheet" th:href="@{/css/admin-css.css}" />
</head>
<body>
<div id="app">
    <el-row>
        <el-col :span="2">&nbsp;</el-col>
        <el-col :span="20">
            <div th:replace="~{admin2/header::header}"></div>
            <el-row style="margin-bottom: 12px;">
                <el-button type="success" size="mini" @click="onBackHome">返回</el-button>
            </el-row>
            <el-row style="margin-bottom: 12px;">
                <el-divider content-position="left">系统配置</el-divider>
            </el-row>
            <el-row style="margin-bottom: 12px; text-align: left">
                <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
                    <el-tab-pane label="首页" name="home" style="padding: 10px">
                        <el-form ref="dataForm" :model="dataForm" :rules="rules" label-width="80px">
                            <el-card shadow="always" style="margin-bottom: 15px">
                                <span style="font-size: 14px; font-weight: bold; margin-bottom: 10px; display: block;">git HubCorners
                                <el-tooltip class="item"
                                            effect="dark"
                                            content="首页左上角的 github HubCorners"
                                            placement="right">
                                        <i class="el-icon-question" style="font-size: 14px; vertical-align: middle;"></i>
                                    </el-tooltip>
                                </span>
                                <el-form-item label="展示" prop="gitHubCornersShow">
                                    <el-switch v-model="dataForm.gitHubCornersShow"></el-switch>
                                </el-form-item>
                                <el-form-item label="链接" prop="gitHubCornersUrl" :required="dataForm.gitHubCornersShow ? true : false">
                                    <el-input v-model="dataForm.gitHubCornersUrl" maxlength="300" show-word-limit :disabled="!dataForm.gitHubCornersShow"></el-input>
                                </el-form-item>
                            </el-card>
                            <el-card shadow="always" style="margin-bottom: 15px">
                                <span style="font-size: 14px; font-weight: bold; margin-bottom: 10px; display: block;">版权信息
                                <el-tooltip class="item"
                                            effect="dark"
                                            content="首页底部的版本信息"
                                            placement="right">
                                        <i class="el-icon-question" style="font-size: 14px; vertical-align: middle;"></i>
                                    </el-tooltip>
                                </span>
                                <el-form-item label="名称" prop="authorName">
                                    <el-input v-model="dataForm.authorName" maxlength="50" show-word-limit></el-input>
                                </el-form-item>
                                <el-form-item label="链接" prop="authorWebsite">
                                    <el-input v-model="dataForm.authorWebsite" maxlength="300" show-word-limit></el-input>
                                </el-form-item>
                            </el-card>

                            <el-card shadow="always" style="margin-bottom: 15px">
                                <span style="font-size: 14px; font-weight: bold; margin-bottom: 10px; display: block;">友情链接</span>
                                <el-row style="margin-top: 10px;">
                                    <el-button type="primary" size="mini" @click="addFriendly" plain>添加</el-button>
                                    <el-popconfirm title="确定清空吗？" @confirm="clearFriendly">
                                        <el-button type="info" slot="reference" size="mini" plain>清空</el-button>
                                    </el-popconfirm>
                                </el-row>
                                <el-row style="margin-top: 10px;">
                                    <el-table :data="dataForm.friendlyInfos" style="width: 100%">
                                        <el-table-column
                                                type="index"
                                                width="50">
                                        </el-table-column>
                                        <el-table-column prop="name" label="name" width="200">
                                            <template slot-scope="scope">
                                                <el-input size="mini" v-model="scope.row.name" clearable></el-input>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="url" label="url">
                                            <template slot-scope="scope">
                                                <el-input size="mini" v-model="scope.row.url" clearable></el-input>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="操作" align="center" width="100">
                                            <template slot-scope="scope">
                                                <el-popconfirm title="确定删除吗？" @confirm="removeFriendly(scope.row)">
                                                    <el-button size="mini" type="danger" slot="reference" plain>删除</el-button>
                                                </el-popconfirm>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </el-row>
                            </el-card>

                            <el-button type="primary" size="mini" @click="onSubmit('dataForm')">提交</el-button>
                            <el-button size="mini" @click="resetForm('dataForm')">重置</el-button>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="后台" name="admin" style="padding: 10px">
                        <el-form ref="dataForm2" :model="dataForm2" :rules="rules2" label-width="80px">
                            <el-card shadow="always" style="margin-bottom: 15px">
                                <span style="font-size: 14px; font-weight: bold; margin-bottom: 10px; display: block;">banner
                                    <el-tooltip class="item"
                                                effect="dark"
                                                content="后台页面音乐图标跳转链接"
                                                placement="right">
                                        <i class="el-icon-question" style="font-size: 14px; vertical-align: middle;"></i>
                                    </el-tooltip>
                                </span>
                                <el-form-item label="链接" prop="bannerLinkUrl">
                                    <el-input v-model="dataForm2.bannerLinkUrl" maxlength="300" show-word-limit></el-input>
                                </el-form-item>
                            </el-card>
                            <el-button type="primary" size="mini" @click="onSubmit2('dataForm2')">提交</el-button>
                            <el-button size="mini" @click="resetForm2('dataForm2')">重置</el-button>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="用户" name="user" style="padding: 10px">
                        <el-form ref="dataForm3" :model="dataForm3" label-width="80px">
                            <el-card shadow="always" style="margin-bottom: 15px">
                                <span style="font-size: 14px; font-weight: bold; margin-bottom: 10px; display: block;">
                                    {{dataForm3.username}}
                                </span>
                                <el-form-item label="2FA认证" prop="twoFactorEnabled">
                                    <el-tag :type="dataForm3.twoFactorEnabled ? 'success' : 'danger'">{{dataForm3.twoFactorEnabled ? '已开启' : '已关闭'}}</el-tag>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="onSubmit3('dataForm3')" :type="dataForm3.twoFactorEnabled ? 'danger' : 'success'" size="mini">{{dataForm3.twoFactorEnabled ? '关闭2FA' : '开启2FA'}}</el-button>
                                </el-form-item>
                            </el-card>
                        </el-form>
                    </el-tab-pane>
                </el-tabs>
            </el-row>
<!--            <div th:replace="~{admin2/admin-foot::admin-foot}"></div>-->
        </el-col>
        <el-col :span="2">&nbsp;</el-col>
    </el-row>

    <el-dialog
            title="2FA认证提示"
            :visible.sync="temp.close2FADialogVisible"
            width="30%">
        <span>是否确认关闭2FA认证？</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="temp.close2FADialogVisible = false" size="mini">取 消</el-button>
            <el-button type="primary" @click="close2FA" size="mini">确 定</el-button>
        </span>
    </el-dialog>

    <el-dialog
            title="2FA认证"
            :visible.sync="temp.open2FADialogVisible"
            :show-close="false"
            :close-on-click-modal="false"
            width="75%">
        <el-form :model="open2FAForm" :rules="open2FAFormRules" ref="open2FAForm" label-position="top">
            <el-form-item label="步骤1. 在移动设备上安装验证器应用">
                <div class="app-container" v-for="app in temp.apps">
                    <span style="display: block;">{{app.name}}</span>
                    <el-image style="width: 64px; height: 64px;
                                    border: 1px solid #eff2f6;
                                    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
                                    border-radius: 8px;"
                                    :src="app.img"></el-image>
                    <div>
                        <el-link style="margin-right: 10px" :href="app.googlePlay" :underline="false" target="_blank">
                            <el-image style="width: 24px; height: 24px;
                                    border: 1px solid #eff2f6;" src="/img/google_play.jpg"></el-image>
                        </el-link>
                        <el-link :href="app.appStore" :underline="false" target="_blank">
                            <el-image style="width: 24px; height: 24px;" src="/img/app_store.jpg"></el-image>
                        </el-link>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="步骤2. 在验证器应用中扫描以下二维码">
                <el-image :src="open2FAForm.qrCodeUrl"></el-image>
            </el-form-item>
            <el-form-item label="步骤3. 在下面输入由验证器应用生成的代码" prop="verifyCode">
                <el-input v-model="open2FAForm.verifyCode" maxlength="6" show-word-limit ></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="cancelOpen2FA" size="mini">取 消</el-button>
            <el-button type="primary" @click="open2FA('open2FAForm')" size="mini">提 交</el-button>
        </span>
    </el-dialog>
</div>

</body>
<script type="text/javascript" th:inline="javascript">
    new Vue({
        el: '#app',
        data: function() {
            const validateGitHubCornersUrl = (rule, value, callback) => {
                if (this.dataForm.gitHubCornersShow && this.dataForm.gitHubCornersUrl === '') {
                    callback(new Error('请输入链接'));
                } else {
                    callback();
                }
            };

            return {
                activeName: 'home',
                dataForm: {
                    authorName: '',
                    authorWebsite: '',
                    gitHubCornersUrl: '',
                    gitHubCornersShow: true,
                    friendlyInfos: []
                },
                dataForm2: {
                    bannerUrl: ''
                },
                dataForm3: {
                    twoFactorEnabled: false,
                    username: ''
                },
                open2FAForm: {
                    twoFactorSecret: '',
                    qrCodeUrl: '',
                    verifyCode: ''
                },
                temp: {
                    apps: [
                        {
                            name: 'Google Authenticator',
                            img: "/img/Google_Authenticator.jpg",
                            googlePlay: 'https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2',
                            appStore: 'https://apps.apple.com/us/app/google-authenticator/id388497605'
                        },
                        {
                            name: 'Microsoft Authenticator',
                            img: "/img/Microsoft_Authenticator.jpg",
                            googlePlay: 'https://play.google.com/store/apps/details?id=com.azure.authenticator&hl=en_US',
                            appStore: 'https://apps.apple.com/us/app/microsoft-authenticator/id983156458'
                        },
                        {
                            name: '2FA Authenticator (2FAS)',
                            img: "/img/2FA_Authenticator_(2FAS).jpg",
                            googlePlay: 'https://2fas.com/',
                            appStore: 'https://apps.apple.com/us/app/2fa-authenticator-2fas/id1217793794'
                        },
                        {
                            name: 'LastPass Authenticator',
                            img: "/img/LastPass_Authenticator.jpg",
                            googlePlay: 'https://play.google.com/store/apps/details?id=com.lastpass.authenticator&hl=en_US',
                            appStore: 'https://apps.apple.com/us/app/lastpass-authenticator/id1079110004'
                        }
                    ],
                    close2FADialogVisible: false,
                    open2FADialogVisible: false
                },
                open2FAFormRules: {
                    verifyCode: [
                        { required: true, message: '请输入验证码', trigger: 'blur' }
                    ]
                },
                rules2: {
                    bannerUrl: [
                        { required: true, message: '请输入链接', trigger: 'blur' }
                    ]
                },
                rules: {
                    authorName: [
                        { required: true, message: '请输入名称', trigger: 'blur' }
                    ],
                    authorWebsite: [
                        { required: true, message: '请输入链接', trigger: 'blur' }
                    ],
                    gitHubCornersUrl:[
                        { validator: validateGitHubCornersUrl, trigger: 'blur' }
                    ]
                }
            }
        },
        mounted() {
            this.initDataForm()
            this.initDataForm2()
        },
        methods: {
            clearFriendly() {
                this.dataForm.friendlyInfos = []
            },
            removeFriendly(friendlyInfo) {
                let index = this.dataForm.friendlyInfos.indexOf(friendlyInfo)
                if (index !== -1) {
                    this.dataForm.friendlyInfos.splice(index, 1)
                }
            },
            addFriendly() {
                if(!this.dataForm.friendlyInfos) {
                    this.dataForm.friendlyInfos = []
                }
                this.dataForm.friendlyInfos.push({
                    name: '',
                    url: '',
                });
            },
            getConfigProcess(configKey, fun) {
                axios.post('./sysConfig/getConfig', {
                    configKey: configKey
                })
                .then(response => {
                    if (response.status === 302) {
                        window.location.href = response.headers['location'];
                    }
                    if(response.data.code === 0) {
                        fun(response.data)
                    } else {
                        this.$message.error(response.data.msg);
                    }
                })
                .catch(error => {
                    this.$message.error(error);
                    console.log(error);
                });
            },
            initDataForm3() {
                this.temp.close2FADialogVisible = false
                this.temp.open2FADialogVisible = false

                this.open2FAForm.twoFactorSecret = ''
                this.open2FAForm.qrCodeUrl = ''
                this.open2FAForm.verifyCode = ''

                axios.post('/admin/user/me')
                    .then(response => {
                        if (response.status === 302) {
                            window.location.href = response.headers['location'];
                        }
                        if(response.data.code === 0) {
                            this.dataForm3 = response.data.data
                        } else {
                            this.$message.error(response.data.msg);
                        }
                    })
                    .catch(error => {
                        this.$message.error(error);
                        console.log(error);
                    });
            },
            initDataForm2() {
                this.getConfigProcess('admin', res => {
                    this.dataForm2 = res.data.content
                })
            },
            initDataForm() {
                this.getConfigProcess('home', res => {
                    this.dataForm = res.data.content
                    if(!this.dataForm.friendlyInfos) {
                        this.dataForm.friendlyInfos = []
                    }
                })
            },
            onBackHome() {
                location.href = './';
            },
            handleClick(tab, event) {
                if(tab.name === 'home') {
                    this.initDataForm()
                }
                if(tab.name === 'admin') {
                    this.initDataForm2()
                }
                if(tab.name === 'user') {
                    this.initDataForm3()
                }
            },
            submitProcess(dataForm, configKey, content) {
                this.$refs[dataForm].validate((valid) => {
                    if (!valid) {
                        return false;
                    }
                    axios.post('./sysConfig/createOrUpdate', {
                        configKey: configKey,
                        content: content
                    })
                    .then(response => {
                        if (response.status === 302) {
                            window.location.href = response.headers['location'];
                        }
                        if(response.data.code === 0) {
                            this.$message({
                                message: response.data.msg,
                                type: 'success'
                            });
                        } else {
                            this.$message.error(response.data.msg);
                        }
                    })
                    .catch(error => {
                        this.$message.error(error);
                        console.log(error);
                    });
                });
            },
            cancelOpen2FA() {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        this.open2FAForm.twoFactorSecret = ''
                        this.open2FAForm.qrCodeUrl = ''
                        this.open2FAForm.verifyCode = ''
                        this.temp.open2FADialogVisible = false
                    })
                    .catch(_ => {});
            },
            open2FA(dataForm) {
                this.$refs[dataForm].validate((valid) => {
                    if (!valid) {
                        return false;
                    }
                    axios.post('/admin/two-factor/enable', {
                        code: this.open2FAForm.verifyCode
                    })
                    .then(response => {
                        if (response.status === 302) {
                            window.location.href = response.headers['location'];
                        }
                        if(response.data.code === 0) {
                            this.initDataForm3()
                            this.temp.open2FADialogVisible = false
                            this.$message({
                                message: response.data.msg,
                                type: 'success'
                            });
                        } else {
                            this.$message.error(response.data.msg);
                        }
                    })
                    .catch(error => {
                        this.$message.error(error);
                        console.log(error);
                    });
                });
            },
            close2FA() {
                axios.post('/admin/two-factor/disable', {})
                .then(response => {
                    if (response.status === 302) {
                        window.location.href = response.headers['location'];
                    }
                    if(response.data.code === 0) {
                        this.initDataForm3()
                        this.temp.close2FADialogVisible = false
                        this.$message({
                            message: response.data.msg,
                            type: 'success'
                        });
                    } else {
                        this.$message.error(response.data.msg);
                    }
                })
                .catch(error => {
                    this.$message.error(error);
                    console.log(error);
                });
            },
            onSubmit3(dataForm) {
                // 开启 -> 关闭
                if (this.dataForm3.twoFactorEnabled) {
                    this.temp.close2FADialogVisible = true
                } else {
                    axios.post('/admin/two-factor/generate', {})
                    .then(response => {
                        if (response.status === 302) {
                            window.location.href = response.headers['location'];
                        }
                        if(response.data.code === 0) {
                            this.open2FAForm.qrCodeUrl = response.data.data.qrCodeUrl
                            this.open2FAForm.twoFactorSecret = response.data.data.twoFactorSecret
                            this.open2FAForm.verifyCode = ''
                            this.temp.open2FADialogVisible = true
                        } else {
                            this.$message.error(response.data.msg);
                        }
                    })
                    .catch(error => {
                        this.$message.error(error);
                        console.log(error);
                    });
                }
                return false;
            },
            onSubmit2(dataForm) {
                this.submitProcess(dataForm, 'admin', this.dataForm2)
            },
            resetForm3(formName) {
                this.$refs[formName].resetFields();
            },
            resetForm2(formName) {
                this.$refs[formName].resetFields();
                this.initDataForm2()
            },
            onSubmit(dataForm) {
                if(this.dataForm.friendlyInfos || this.dataForm.friendlyInfos.length > 0) {
                    let targetIndex = this.dataForm.friendlyInfos.findIndex(data => !data.url || data.url === '' || !data.name || data.name === '')
                    if(targetIndex !== -1) {
                        this.$message.error(`友情链接的第 ${targetIndex + 1} 行信息未填写完整`)
                        return
                    }
                }
                this.submitProcess(dataForm, 'home', this.dataForm)
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.initDataForm()
            }
        }
    })
</script>

<style>
.app-container {
    padding: 30px 0;
    text-align: center;
    border-right: 1px solid #eff2f6;
    border-left: 1px solid #eff2f6;
    display: inline-block;
    width: 25%;
    box-sizing: border-box;
    vertical-align: top;
}
</style>
</html>
